import React from 'react';
import './App.css'
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import User from './pages/user'
import Find from './pages/find'
import Cloud from './pages/cloud'
import Video from './pages/video'
import Login from './pages/login'
import Nav from './components/nav'
import Search from './pages/search'
import TopPage from './pages/pageTop'
import Register from './pages/register'

function Protect(props: any) {
  let Com = props.component;
  return <Route path={props.path} render={(params) => {
    let isLogin = true;
    return isLogin ? <Com {...params} /> : <Redirect to='/login'></Redirect>
  }}></Route>
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div style={{ height: '50px' }}>
          <Nav />
        </div>
        <Switch>
          <Route path='/' exact render={() => <Redirect to='/find'></Redirect>}></Route>
          <Protect path='/user' component={User}></Protect>
          <Route path='/find' component={Find}></Route>
          <Route path='/cloud' component={Cloud}></Route>
          <Route path='/video' component={Video}></Route>
          <TopPage>
            {/* <Switch> */}
              <Route path='/search' component={Search}></Route>
              <Route path='/login' component={Login}></Route>
              <Route path='/register' component={Register}></Route>
            {/* </Switch> */}
          </TopPage>
          
          <Route path='*' render={() => <h1>404</h1>}></Route>
        </Switch>
        
      </BrowserRouter>
    </div>
  );
}

export default App;
